<template>
  <div class="g-nested-loading">
    <div
      v-if="spinning"
      class="g-loading-mask"
      :class="spinContentClass"
      :style="spinning ? spinContentStyle : {}"
    >
      <div class="g-loading">
        <div
          v-if="type === 'dna'"
          class="dna-loading"
        >
          <div
            v-for="i in 60"
            :key="i"
            class="dna-ele"
          >
            <div class="dna-dot" />
          </div>
        </div>
        <div
          v-else-if="type === 'square'"
          class="square-loading"
        >
          <i class="loading-icon validating" />
          <i class="loading-icon validating" />
          <i class="loading-icon validating" />
        </div>
        <div v-else>
          {{ type }}
        </div>
      </div>
    </div>
    <slot />
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType, ref } from "vue";

export default defineComponent({
  name: "TLoading",
  props: {
    type: {
      type: String as PropType<"dna" | "square">,
      default: "dna"
    },
    spinning: {
      type: Boolean,
      default: false
    },
    theme: {
      type: String as PropType<"dark" | "light">,
      default: "light"
    },
    opacity: {
      type: Number,
      default: 1
    },
    wrapClass: {
      type: String
    },
    wrapStyle: {
      type: {} as PropType<Record<string, any>>
    }
  },
  setup(props) {
    // const opacity = props.opacity > 1 ? 1 : props.opacity < 0 ? 0 : props.opacity;

    const spinContentClass = ref("");
    if (props.spinning) {
      if (props.wrapClass) {
        spinContentClass.value += ` ${props.wrapClass}`;
      }
    } else {
      spinContentClass.value = "";
    }

    const wrapStyle: Record<string, any> = props.wrapStyle || {};
    const spinContentStyle = ref({
      ...wrapStyle,
      background: "transparent"
    });

    return {
      spinContentClass,
      spinContentStyle
    };
  }
});
</script>
<style lang="scss" scoped>
@use "loading" as *;
</style>
